<!--
 * @Description: 导航
 * @Author: zhao
 * @Date: 2022-06-29 14:22:17
 * @LastEditors: zhao
 * @LastEditTime: 2022-06-30 09:35:36
-->
<!--  -->
<template>
    <div class="nav">
        <a href="javascript:void(0);" @click.stop="open()">导航></a>
        <div v-show="navMenu" class="navMenu">
            <i class="el-icon-close cursor" @click="closure()"></i>
            <ul>
                <li>
                    <div class="navMenu_left">
                        <dt
                            class="cursor"
                            ref="province"
                            @click="handleNav(i.name, 0)"
                            @mouseenter="getNavData(i.name, 'province', index, i.area_number)"
                            v-for="(i, index) in navMenuData"
                            :key="index + 'navMenu'"
                        >
                            {{ i.name }}
                        </dt>
                    </div>
                    <span></span>
                    <div class="navMenu_content">
                        <dt
                            class="cursor"
                            ref="city"
                            @click="handleNav(s.name, 1)"
                            @mouseenter="getNavData(s.name, 'city', sindex, s.area_number)"
                            v-for="(s, sindex) in cityData"
                            :key="sindex + 'navMenuData'"
                        >
                            {{ s.name }}
                        </dt>
                    </div>
                    <div class="navMenu_right">
                        <dt
                            class="cursor"
                            ref="area"
                            @mouseenter="getNavData(a.name, 'area', aindex, a.area_number)"
                            @click="handleNav(a.name, 'area', 2)"
                            v-for="(a, aindex) in areaData"
                            :key="aindex + 'areaData'"
                        >
                            {{ a.name }}
                        </dt>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import NavData from "./NavData"
export default {
    name: "",
    data() {
        return {
            navMenu: false,
            navMenuData: [],
            cityData: [],
            areaData: [],
            Nav: {
                province: "河北省",
            },
            navMenu_left_class: "hovers",
        }
    },

    components: {},

    computed: {},

    mounted() {
        this.init()
    },

    methods: {
        getNavData(data, type, index, code) {
            if (type === "province") {
                this.areaData = []
                this.Nav.city = ""
                this.Nav.area = ""
                this.getArea({ id: code }).then((res) => {
                    this.cityData = res || []
                })
                // = NavData.filter((e) => e.label === data)[0].children || []
            }

            if (type === "city") {
                this.Nav.area = ""
                this.getArea({ id: code }).then((res) => {
                    this.areaData = res || []
                })
                // this.areaData = this.cityData.filter((e) => e.label === data)[0].children || []
            }

            this.$refs[type].map((s) => {
                s.className = "cursor"
            })
            this.$refs[type][index].className = "hovers cursor"

            this.Nav[type] = data
        },
        closure() {
            this.navMenu = false
        },
        open() {
            this.navMenu = true
        },
        init() {
            this.getArea().then((res) => {
                this.navMenuData = res
            })
            // this.getNavData(this.Nav.province, "province", 0)
            this.handleNav()
        },
        async getArea(val) {
            const { data } = await this.$store.dispatch("ArchiveInfo/getDivision", val)
            return data
        },
        //标记点击 、划上的nav
        markNav() {},
        handleNav(data, index) {
            this.$emit("setNav", this.Nav)
        },
    },
}
</script>
<style lang='scss' scoped>
.nav {
    position: relative;

    a {
        color: #1f529e;
        font-size: 0.33rem;
    }

    .navMenu {
        background-color: #295ca5;
        opacity: 0.8;
        width: 8.35rem;
        min-height: 100px;
        z-index: 100;
        position: absolute;
        top: 10px;
        left: 70px;
        color: #fff;

        li {
            overflow: hidden;
            margin: 0;
            padding: 20px;
            display: table;
            width: 100%;
            box-sizing: border-box;
            display: flex;

            dt {
                padding: 3px 10px;
            }

            .navMenu_left {
                vertical-align: middle;
                text-align: left;
                border-right: 1px solid #fff;
                padding-right: 10px;
            }

            .navMenu_content {
            }

            .navMenu_right {
                width: 50%;

                dt {
                    float: left;
                    padding: 3px 10px;
                }
            }
        }

        i {
            position: absolute;
            right: 10px;
            top: 10px;
        }
    }
}

.hovers {
    background: #ddd;
    color: #295ca5;
}
</style>